Google Maps in Your Web Page

You can put a Google map in your web page by copying and pasting a link from the Google map page you want to show. It sounds intimidating but it's super easy.

Find the map you want on Google.

For my example, I'm going to search Google for "Patagonia, Argentina"; then I'm going to click on "map" so that is shows a map instead of a bunch of websites about Argentina.

Click here to seee what my search results look like.

Embed the Map

An embedded link will put the map in a little window inside your web page.

On the Google Map page, find the little icon that looks like a piece of iron chain. Click on it, and the "paste link" box will pop up, as shown below.

Google provides two links; one is the "short url", which you can use to create a hot link to this map.

The second one is the "Embedded Link". This is the one we want. Copy this text into your page in the html area, and it will appear as a map when you view the web page in your web browser. In Dreamweaver all you will see is a grey box. That's fine.

Here's the html I'm copying from the Google Maps page:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=patagonia,+argentina&amp;aq=&amp;
sll=33.935442,-118.080497&amp;sspn=1.663434,2.17804&amp;ie=UTF8&amp;hq=&amp;hnear=Patagonia&amp;t=m&amp;z=5&amp;
ll=-41.810147,-68.906269&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;
source=embed&amp;hl=en&amp;geocode=&amp;q=patagonia,+argentina&amp;aq=&amp;sll=33.935442,-118.080497&amp;
sspn=1.663434,2.17804&amp;ie=UTF8&amp;hq=&amp;hnear=Patagonia&amp;t=m&amp;z=5&amp;ll=-41.810147,-68.906269" 
style="color:#0000FF;text-align:left">View Larger Map</a></small>

Here's what the final result looks like:

View Larger Map

Advanced Google Maps

You can create pushpins and callouts on a map to show were things are for your web page.

This is done by creating, and saving, your map to your gmail account, make it publicly available, and then create an embedded link to it.

The first thing you need is a Google (or gmail) account. Go to their site and sign in.

Now go to the Maps page and look for the link to "My Maps"

Create a map, give it a name, add pushpins, and you can create a very complicated advanced map. Embed or link to it just as you would with one of the regular Google maps.

(This page to be continued)